<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="黑马优购"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
      v-show="flag"
    />
    <img src="../../public/icons/cart.png" alt="">
    <span>购物车列表</span>
    <!-- 列表区域 -->
    <div class="fuxuananiu">
      <van-row v-for="(item, index) in $store.state.goods" :key="index">
        <van-card :num="item.count" :price="item.price" :title="item.name" :thumb="item.pic"></van-card>
      </van-row>
    </div>
    <!-- 提交订单区域 -->
    <div class="shopping_cart_submit">
      <van-submit-bar :price="3333" button-text="提交订单">
        <!-- 全选按钮的状态在vuex中定义 -->
        <van-checkbox>全选</van-checkbox>
      </van-submit-bar>
    </div>
    <!-- 底部区域 -->
    <van-tabbar v-model="active" fixed border="" z-index="1" route>
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/class" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item replace to="/shopping" icon="cart-o" :badge="$store.getters.getAllCount">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: ["1", "2"],
      active: ""
    };
  },
  created() {
    this.flag = this.$route.path === "/home" ? false : true;
  },

  methods: {
    //后退功能
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  watch: {
    "$router.path": function(newVal) {
      if (newVal === "/home") {
        this.flag = false;
      } else {
        this.flag = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #d81e06;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 16px;
}

.van-nav-bar__text {
  color: #fff;
  font-size: 14px;
}
.van-icon::before {
  display: inline-block;
  color: #fff;
  padding-top: 10px;
}

img {
  width: 20px;
  height: 20px;
  vertical-align: top;
  margin: 10px 5px 10px 20px;
}

span {
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
}
.van-submit-bar {
  position: fixed;
  bottom: 50px;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
.van-button--round {
  border-radius: 0;
}

.van-button__text {
  margin-top: 0;
}

.van-submit-bar__text {
  margin-bottom: 15px;
}
.fuxuananiu {
  position: relative;
}
.van-checkbox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>